<template>
    <Popup :class="`tech-shop-member-password ${mode} ${styleMode}`" v-model="showAuthentication" :close-on-click-overlay="false" container="body">
        <div :class="modalClass">
            <div :class="`modal-content ${mode}`">
                <div class="dialog-title title-color">输入支付密码</div>
                <div class="card-info tip-color">{{memberCardInfo.gradeName}}(剩余￥{{memberCardInfo.balance}})</div>
                <div class="dialog-content tip-color">
                    <PasswordInput :value="password" @focus="showKeyboard = true" />
                </div>
                <div class="dialog-btn border-black-color">
                    <Button class="cancel-btn black-btn-style border-black-color" @click="cancel">取消</Button>
                    <Button class="ok-btn black-btn-style border-black-color" :disabled="isAuthing" @click="authentication">确定</Button>
                </div>
            </div>
        </div>
        <NumberKeyboard :class="`${mode}`" :show="showKeyboard" @input="onInput" @delete="onDelete" @blur="showKeyboard = false" />
    </Popup>
</template>

<script>
import { Popup, PasswordInput, NumberKeyboard, Button } from 'vant';
import { mapState, mapActions } from 'vuex';
import { MiniIcon } from '@components/base';
import { getUserMemberIdCookie } from '@biztools/info';
import { checkPassword } from '@common/market';
import ModeMixin from '@common/mixin';
export default {
    name: 'ShopMemberPassword',
    mixins: [ModeMixin],
    components: {
        Popup,
        PasswordInput,
        NumberKeyboard,
        Button,
        MiniIcon,
    },
    computed: {
        ...mapState({
            memberId: state => state.shopMember.memberInfo.memberId || getUserMemberIdCookie(),
            memberCardInfo: state => state.shopMember.memberCard,
        }),
        modalClass() {
            const { mode, styleMode } = this.$props;
            return `tech-modal ${this.showKeyboard ? 'show-keyboard' : ''} ${mode} ${styleMode}`;
        },
    },
    data() {
        return {
            showAuthentication: false,
            showKeyboard: true,
            password: '',
            isAuthing: false,
        };
    },
    watch: {
        password(val, oldVal) {
            if (val.length === 6) {
                this.showKeyboard = false;
            }
        },
        authType(val, oldVal) {
            this.type = val;
            this.showKeyboard = val === 'password';
        },
    },
    methods: {
        show() {
            this.showAuthentication = true;
            setTimeout(() => {
                this.showKeyboard = true;
            }, 10);
        },
        close() {
            this.showAuthentication = false;
            setTimeout(() => {
                Object.assign(this.$data, this.$options.data());
            }, 300);
        },
        cancel() {
            this.$emit('cancel');
            this.close();
        },
        onInput(key) {
            this.password = (this.password + key).slice(0, 6);
        },
        onDelete() {
            this.password = this.password.slice(0, this.password.length - 1);
        },
        async authentication() {
            if (this.isAuthing) return;
            this.isAuthing = true;
            const result = await checkPassword(this.memberId, this.password);
            this.isAuthing = false;
            this.$emit('ensure', result);
            this.close();
        },
    },
};
</script>

<style lang="less">
.tech-shop-member-password {
    width: 100%;
    height: 100%;
    .flex-column-center();
    background-color: transparent !important;

    .tech-modal {
        width: 90%;
        position: relative;
        .style-mode();
        overflow: hidden;
        &.show-keyboard {
            .m-t(-160);
        }
        .modal-content {
            .p(0);
        }
        .mode-white();
    }
    .modal-content {
        // width: calc(100% - 2 * @gap-lg);
        .style-mode();
        .mode-white();
        .flex-column-center();
        overflow: hidden;
        &.black {
            .van-password-input__security {
                background-color: @black;
            }
            .van-password-input__security i {
                background-color: @white;
            }
        }
        .dialog-title {
            .font-size-md();
            font-weight: @font-weight-bold;
            .t-c();
            .m-t(28);
        }
        .card-info {
            font-size: @font-size;
            color: @text-color;
            .m-t(@shop-gap);
        }
        .dialog-content {
            width: 295px;
            height: 52px;
            .m-h(24);
            .m-t(30);
            .m-b(40);
            .font-size();
            color: @tip-color;
            word-break: break-all;
        }
        .dialog-btn {
            width: 100%;
            .flex-row-center();
            border-top: @border;
            .van-button {
                flex: 1;
                height: 56px;
                border: none;
                .font-size-md();
                font-weight: @font-weight-bold;
            }
            .cancel-btn {
                border-right: @border;
                color: @tip-color;
            }
            .ok-btn {
                color: #576B95;
            }
        }
    }
    .van-password-input {
        .m(0);
    }
    [class*=van-hairline]::after {
        border-color: @gray-dark;
    }
}
.van-number-keyboard {
    &.black {
        background-color: @black;
        .van-key--gray {
            background-color: @black-bg-color;
        }
        .van-key {
            color: @white;
        }
    }
}
</style>

